<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>井字棋</title>
		<!--<link rel="Shortcut Icon" href="images/LEGO.ico" type="image/x-icon" />-->
          <style>
            body{
                background-color: black;
                text-align: center;
            }
            #top-left,#top-right,#top-mid,
            #middle-left,#middle-right,#middle-mid,
            #bottom-left,#bottom-right,#bottom-mid{
                width: 200px;
                height: 200px;
                border:2px solid white;
                display:inline-block;
                padding-top:30px;
            }
            .score{
                color: #fff;
                font-size:50px;
            }
          </style>
    </head>
    <body>
    	<div id = "top">
            <div id="top-left"><span style="font-size: 100px;">.</span></div>
            <div id="top-mid"><span style="font-size: 100px;">.</span></div>
            <div id="top-right"><span style="font-size: 100px;">.</span></div>
        </div> 
        <div id = "middle">
            <div id="middle-left"><span style="font-size: 100px;">.</span></div>
            <div id="middle-mid"><span style="font-size: 100px;">.</span></div>
            <div id="middle-right"><span style="font-size: 100px;">.</span></div>
        </div> 
        <div id = "bottom">
            <div id="bottom-left"><span style="font-size: 100px;">.</span></div>
            <div id="bottom-mid"><span style="font-size: 100px;">.</span></div>
            <div id="bottom-right"><span style="font-size: 100px;">.</span></div>
        </div>
        <span class="score">X:</span>
        <span class="score">O:</span>
        <script>
            function winf(){
                
            }
            var c = 'X';
            var arr = [0,0,0,
                   0,0,0,
                   0,0,0]
            arr[0]= document.getElementById("top-left")
            arr[1]= document.getElementById("top-mid")
            arr[2]= document.getElementById("top-right")

            arr[3]= document.getElementById("middle-left")
            arr[4]= document.getElementById("middle-mid")
            arr[5]= document.getElementById("middle-right")

            arr[6]= document.getElementById("bottom-left")
            arr[7]= document.getElementById("bottom-mid")
            arr[8]= document.getElementById("bottom-right")
            var arr2 = [1,2,3,
                        4,5,6,
                        7,8,9]
            for(var i = 0;i<arr.length;i++){
                arr[i].index = i
                arr[i].onclick = function(){
                    if (arr2[this.index] != "X" && arr2[this.index] != "O"){
                        var span = document.createElement("span")
                        arr[this.index].innerHTML = '<span style="font-size: 100px;color:#FFFFFF">' + c + "</span>" 
                        arr2[this.index] = c
                        if (c == "X"){
                            c = "O"
                        }else{
                            c = "X"
                        }
                    }
                }
                        
            }
            var s = setInterval(function(){
                var win = 0;
                if (arr2[0] == arr2[1] && arr2[1] == arr2[2]){
                    alert("赢了")
                    win = 1;
                    clearInterval(s)
                    
                }
                else if (arr2[3] == arr2[4] && arr2[4] == arr2[5]){
                    alert("赢了")
                    win = 1;
                    clearInterval(s)
                }
                else if (arr2[6] == arr2[7] && arr2[7] == arr2[8]){
                    alert("赢了")
                    win = 1;
                    clearInterval(s)
                }
                else if (arr2[0] == arr2[4] && arr2[4] == arr2[8]){
                    alert("赢了")
                    win = 1;
                    clearInterval(s)
                }
                else if (arr2[2] == arr2[4] && arr2[4] == arr2[6]){
                    alert("赢了")
                    win = 1;
                    clearInterval(s)
                }


                else if (arr2[0] == arr2[3] && arr2[3] == arr2[6]){
                    alert("赢了")
                    win = 1;
                    clearInterval(s)
                }
                else if (arr2[1] == arr2[4] && arr2[4] == arr2[7]){
                    alert("赢了")
                    win = 1;
                    clearInterval(s)
                }
                else if (arr2[2] == arr2[5] && arr2[5] == arr2[8]){
                    alert("赢了")
                    win = 1;
                    clearInterval(s)
                }
                var f = 0;
                for(var i = 0;i<arr2.length;i++){
                    if (arr2[i] != "X" && arr2[i] != "O"){
                        f = 1;
                    }
                }
                if (f == 0 && win == 0){
                    alert("平局")
                    clearInterval(s)
                }
            },100)
        </script>
    </body>
</html>

